<template lang="pug">
  el-form-item(v-if="!scope" :class="config.label?'':'form-label-hidden'" :label="config.label" :prop="config.propertyName" :rules="rules")
    date-picker(v-if="config.dateType==='date'||!config.dateType" ref='date' :editor="editor" :config="config"  v-model="rootForm.properties[config.propertyName]" :readonly="readonly")
    datetime-picker(v-if="config.dateType==='datetime'" ref='date' :editor="editor" :config="config"  v-model="rootForm.properties[config.propertyName]" :readonly="readonly")
    time-picker(v-if="config.dateType==='time'" ref='date' :editor="editor" :config="config"  v-model="rootForm.properties[config.propertyName]" :readonly="readonly")
    daterange-picker(v-if="config.dateType==='daterange'" ref='date' :editor="editor" :config="config"  v-model="rootForm.properties[config.propertyName]" :readonly="readonly")
    datetimerange-picker(v-if="config.dateType==='datetimerange'" ref='date' :editor="editor" :config="config"  v-model="rootForm.properties[config.propertyName]" :readonly="readonly")
    yearmonth-picker(v-if="config.dateType==='yearmonth'" ref='date' :editor="editor" :config="config"  v-model="rootForm.properties[config.propertyName]" :readonly="readonly")
  
  //- el-form-item(v-else :prop="config.propertyName" label-width="0px" :rules="rules")
  div(v-else)
    requiredLabel.scope-label(:required="required" :label="config.label")
    date-picker(:class="{'scope-success':flag&&!scopeErrorMessage,'scope-normal':!flag}" v-if="config.dateType==='date'||!config.dateType" ref='date' :editor="editor" :config="config"  v-model="scope[config.propertyName]" :readonly="readonly")
    datetime-picker(:class="{'scope-success':flag&&!scopeErrorMessage,'scope-normal':!flag}" v-if="config.dateType==='datetime'" ref='date' :editor="editor" :config="config"  v-model="scope[config.propertyName]" :readonly="readonly")
    time-picker(:class="{'scope-success':flag&&!scopeErrorMessage,'scope-normal':!flag}" v-if="config.dateType==='time'" ref='date' :editor="editor" :config="config"  v-model="scope[config.propertyName]" :readonly="readonly")
    daterange-picker(:class="{'scope-success':flag&&!scopeErrorMessage,'scope-normal':!flag}" v-if="config.dateType==='daterange'" ref='date' :editor="editor" :config="config"  v-model="scope[config.propertyName]" :readonly="readonly")
    datetimerange-picker(:class="{'scope-success':flag&&!scopeErrorMessage,'scope-normal':!flag}" v-if="config.dateType==='datetimerange'" ref='date' :editor="editor" :config="config"  v-model="scope[config.propertyName]" :readonly="readonly")
    yearmonth-picker(:class="{'scope-success':flag&&!scopeErrorMessage,'scope-normal':!flag}" v-if="config.dateType==='yearmonth'" ref='date' :editor="editor" :config="config"  v-model="scope[config.propertyName]" :readonly="readonly")

    .scope-error-message {{scopeErrorMessage}}
</template>
<script>
import requiredLabel from '../../../../components/requiredLabel'
import inputCommon from '../../../../mixin/inputCommon'
import datePicker from './datePicker'
import datetimePicker from './datetimePicker'
import timePicker from './timePicker'
import daterangePicker from './daterangePicker'
import datetimerangePicker from './datetimerangePicker'
import yearmonthPicker from './yearmonthPicker'
export default {
  name: 'dateRender',
  components: { datePicker, datetimePicker, timePicker, daterangePicker, datetimerangePicker, requiredLabel, yearmonthPicker },
  mixins: [inputCommon],
  props: ['config', 'editor', 'scope','readonlyMain'],
  inject: ['rootForm'],
  data() {
    return {
      default: undefined,
      scopeErrorMessage: '',
      flag: false // 还未被校验
    }
  },
  methods: {
    // 针对scope的验证
    validate() {
      if (this.scope) {
        this.flag = true
        if (this.required && !this.scope[this.config.propertyName]) {
          this.scopeErrorMessage = '必填项'
          return false
        }
        this.scopeErrorMessage = ''
        return true
      }
    }
  },
  computed: {
    scopeValue() {
      if (this.scope) {
        return this.scope[this.config.propertyName]
      }
      return false
    }
  },
  watch: {
    scopeValue() {
      this.validate()
    }
  },
  created() {
  }
}
</script>
